<!-- 用户具体信息显示 -->
<template>
  <div id="pet-info">
    <nav-bar class="navbar">
      <template v-slot:left>
        <img src="~assets/img/navbar/left_arrow.svg" @click="petAddOut" />
      </template>
      <template v-slot:center>
        <h3>添加爱宠</h3>
      </template>
    </nav-bar>

    <div class="pet-photo">
      <img src="~assets/img/profile/addInfoIcon.svg" alt="">
    </div>

    <info-slot>
      <template v-slot:lable>*</template>
      <template v-slot:name>昵称</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请输入您的爱宠昵称"
        v-model="petProfile.name">
      </template>
    </info-slot>

    <info-slot>
      <template v-slot:lable>*</template>
      <template v-slot:name>性别</template>
      <template v-slot:content1>
        <input type="radio" name="gender" 
        hidden id="genderW" value="0"
        v-model="petProfile.gender"/>
        <label for="genderW" class="checkbox">妹妹</label>
      </template>
      <template v-slot:content2>
        <input type="radio" name="gender" 
        hidden id="genderM" value="1"
        v-model="petProfile.gender"/>
        <label for="genderM" class="checkbox">弟弟</label>
      </template>
    </info-slot>

    <info-slot>
      <template v-slot:lable>*</template>
      <template v-slot:name>品种</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请选择宠物品种" 
        v-model="petProfile.breed"/>
      </template>
      <template v-slot:content2></template>
    </info-slot>

    <info-slot>
      <template v-slot:lable>*</template>
      <template v-slot:name>生日</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请选择您的爱宠出生日期"
        v-model="petProfile.birthday">
      </template>
      <template v-slot:content2></template>
    </info-slot>

    <info-slot>
      <template v-slot:name>毛色</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请输入您的爱宠的毛发颜色"
        v-model="petProfile.coatColor">
      </template>
      <template v-slot:content2></template>
    </info-slot>

    <info-slot>
      <template v-slot:name>身高</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请输入您的爱宠身高"
        v-model="petProfile.height"> cm
        </template>
      <template v-slot:content2></template>
    </info-slot>

    <info-slot>
      <template v-slot:name>体重</template>
      <template v-slot:content1>
        <input type="text" class="content1-text" 
        placeholder="请输入您的爱宠体重"
        v-model="petProfile.weight"> kg
        </template>
      <template v-slot:content2></template>
    </info-slot>

    <info-slot>
      <template v-slot:name>绝育情况</template>
      <template v-slot:content1>
        <input type="radio" name="sterilization" 
        hidden id="sterilized" value="0"
        v-model="petProfile.sterilization"/>
        <label for="sterilized" class="checkbox">已绝育</label>
      </template>
      <template v-slot:content2>
        <input type="radio" name="sterilization" 
        hidden id="not-sterilized" value="1"
        v-model="petProfile.sterilization"/>
        <label for="not-sterilized" class="checkbox">未绝育</label>
      </template>
    </info-slot>

    <info-slot class="noborder">
      <template v-slot:name>备注</template>
    </info-slot>
    <textarea class="pet-desc" 
    placeholder="请描述宠物信息~"
    v-model="petProfile.remarks"></textarea>

    <div class="submit">
      <button type="button" @click="onSubmit">提交</button>
    </div>
  </div>
</template>

<script>
import NavBar from "common/navbar/NavBar.vue";
import InfoSlot from "../InfoSlot";

export default {
  name: "PetAdd",
  components: {
    NavBar,
    InfoSlot,
  },
  data() {
    return {
      petProfile: {
        petPhoto:"petDefault.jpg",
        nama: "",
        gender: "",
        breed: "",
        birthday:"",
        coatColor:"",
        height:"",
        weight:"",
        sterilization:"",
        remarks:""
      },
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  methods: {
    petAddOut() {
      this.$emit("petAddOut");
    },
    onSubmit(){
      //仿添加成功后 让userPet显示信息
      const p = this.petProfile
      if(p.name && p.gender && p.breed){
        this.$emit("petDate")
      }
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
};
</script>

<style scoped>
#pet-info {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
}
.navbar img {
  width: 25px;
  height: 25px;
}
.navbar h3 {
  text-align: center;
}
.content1 {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
  color: #ccc;
}
.content1 img {
  width: 100%;
}
.submit {
  position: fixed;
  bottom: 50px;
  width: 100%;
}
.submit button {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background-image: linear-gradient(to right, #ff8b12, #fe5d05);
  width: 90%;
  padding: 15px 0;
  border-radius: 40px;
  box-shadow: 0 3px 3px rgba(100, 100, 100, 0.4);
  color: #fff;
  font-size: 17px;
}
.noborder::after {
  border: 0;
}
.checkbox {
  background-color: #f0f0f0;
  padding: 5px 15px;
  border-radius: 20px;
  color: #000;
}
input[type="radio"]:checked + .checkbox {
  border: 1px solid #ff8b12;
  background-color: #ffefdd;
  color: #ff8b12;
}
.pet-desc {
  margin: 0 15px;
  padding: 10px;
  border: 1px solid rgb(228, 228, 228);
  width: calc(100% - 30px);
  height: 200px;
  background-color: rgb(252, 252, 252);
  border-radius: 10px;
  color: rgb(180, 179, 179);
  font-size: 15px;
}
input[type=text]{
  text-align: right;
}
input[type=text]::-webkit-input-placeholder {
  color: #ccc;
}
input[type=text]::-moz-input-placeholder {
  color: #ccc;
}
input[type=text]::-ms-input-placeholder {
  color: #ccc;
}
.pet-photo{
  position: relative;
  margin: 10px auto;
  text-align: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 7px rgba(100, 100, 100, 0.2);
}
.pet-photo img{
  width: 40px;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>